<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }

        .content1{
            width: 47rem;
            overflow: hidden;
        }
        .div2{
            width: 47rem;
            height: 6rem;
            position: relative;
        }
        .d5{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            left: 1rem;
        }
        .img3{
            width: 2rem;
            height: 2rem;
        }
        .p1{
            width: 16rem;
            height: 2rem;
            color: rgb(95, 95, 95);
            line-height: 2rem;
            font-size: 1.5rem;
            position: absolute;
            left: 4rem;
            top: 2rem;
        }
        #p3{
            width: 3rem;
            height: 2rem;
            line-height: 2rem;
            font-size: 1.5rem;
            position: absolute;
            top: 2rem;
            right: 2rem;
        }

        .div3{
            width: 47rem;
            overflow: hidden;
        }
        .d6{
            width: 47rem;
            height: 14rem;
            background-color: rgb(249,249,249);
            position: relative;
        }
        .d7{
            width: 2rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 6rem;
        }
        .d8{
            width: 10rem;
            height: 10rem;
            position: absolute;
            top: 2rem;
            left: 5rem;
        }
        .img4{
            width: 10rem;
            height: 10rem;
        }
        .p5{
            width: 29rem;
            height: 3rem;
            font-size: 1.5rem;
            position: absolute;
            top: 2rem;
            right: 1rem;
        }
        .p6{
            width: 15rem;
            height: 1rem;
            position: absolute;
            font-size: 1.2rem;
            top: 6rem;
            right: 15rem;
            color: gray;
        }
        #p7{
            width: 7rem;
            height: 2rem;
            font-size: 1.8rem;
            line-height: 2rem;
            color: red;
            position: absolute;
            top: 9rem;
            right: 23rem;
        }
        .d9{
            width: 6rem;
            height: 3rem;
            background-color: white;
            border: 0 solid grey;
            border-width: 0 0.2rem 0.1rem 0;
            font-size: 1.5rem;
            text-align: center;
            line-height: 3rem;
            position: absolute;
            top: 9rem;
            right: 1rem;
        }
        .d002{
            width: 1rem;
            height: 1rem;
            border-top: 1rem solid rgb(53, 53, 53);
            border-right: 0.5rem solid transparent;
            border-left: 0.5rem solid transparent;
            border-bottom: 0rem solid transparent;
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1;
            box-sizing: border-box;
        }
        .d022{
            width: 1rem;
            height: 1rem;
            border-top: 1rem solid rgb(53, 53, 53);
            border-right: 0.5rem solid transparent;
            border-left: 0.5rem solid transparent;
            border-bottom: 0rem solid transparent;
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1;
            box-sizing: border-box;
        }
        .d222{
            width: 1rem;
            height: 1rem;
            border-top: 1rem solid rgb(53, 53, 53);
            border-right: 0.5rem solid transparent;
            border-left: 0.5rem solid transparent;
            border-bottom: 0rem solid transparent;
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1;
            box-sizing: border-box;
        }
        .d003{
            width: 47rem;
            height: 1rem;
            background-color: rgb(244,244,244);
        }

        .content2{
            width: 47rem;
            overflow: hidden;
        }
        .d001{
            width: 10rem;
            height: 2rem;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: rgba(105, 104, 104, 0.5);
            color: white;
            line-height: 2rem;
            text-align: center;
        }
        .img5{
            width: 2rem;
            height: 2rem;
        }
        .img6{
            width: 2rem;
            height: 2rem;
        }
        .img7{
            width: 10rem;
            height: 10rem;
        }
        .dd9{
            width: 6rem;
            height: 3rem;
            background-color: white;
            border: 0 solid rgb(204, 203, 203);
            border-width: 0 0.2rem 0.1rem 0;
            font-size: 1.5rem;
            text-align: center;
            line-height: 3rem;
            position: absolute;
            top: 9rem;
            right: 1rem;
            color: rgb(204, 203, 203);
        }
        #dd002{
            width: 1rem;
            height: 1rem;
            border-top: 1rem solid rgb(212, 210, 210);
            border-right: 0.5rem solid transparent;
            border-left: 0.5rem solid transparent;
            border-bottom: 0rem solid transparent;
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 1;
            box-sizing: border-box;
        }
        .d004{
            width: 47rem;
            height: 9rem;
            background-color: rgb(244,244,244);
            position: relative;
        }
        #d005{
            width: 14rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 17rem;
            border: 0.1rem solid goldenrod;
            font-size: 1.5rem;
            text-align: center;
            line-height: 4rem;
            color: goldenrod;
        }

        .footer{
            width: 47rem;
            height: 6rem;
            position: relative;
        }
        .d10{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            left: 1rem;
        }
        .d006{
            width: 4rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            position: absolute;
            left: 4rem;
            top: 2rem;
            color: rgb(95, 94, 94);
        }
        .d007{
            width: 6rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            position: absolute;
            top: 1rem;
            left: 16rem;
        }
        #grade{
            width: 10rem;
            height: 2rem;
            font-size: 1.5rem;
            line-height: 2rem;
            position: absolute;
            top: 1rem;
            left: 20rem;
            color: red;
        }
        .d008{
            width: 5rem;
            height: 1rem;
            font-size: 1.2rem;
            position: absolute;
            top: 1.5rem;
            left: 28rem;
        }
        .d009{
            width: 5rem;
            height: 1rem;
            font-size: 1.2rem;
            color: rgb(99,99,99);
            position: absolute;
            top: 3.2rem;
            left: 23.5rem;
        }
        #grade2{
            width: 6rem;
            height: 1rem;
            font-size: 1.2rem;
            color: rgb(99,99,99);
            position: absolute;
            top: 3.2rem;
            left: 28rem;
        }
        #d010{
            width: 13rem;
            height: 6rem;
            background-color: red;
            color: white;
            line-height: 6rem;
            text-align: center;
            font-size: 2rem;
            position: absolute;
            right: 0;
            top: 0;
        }

        .xd{
            width: 6rem;
            height: 2rem;
            position: absolute;
            bottom: 2.3rem;
            right: 9rem;
            display: none;
        }
        .xd1{
            width: 2.9rem;
            height: 2rem;
            border-right: 0.2rem solid rgb(153, 153, 153);
            position: absolute;
            left: 0;
            top: 0.2rem;
        }
        .imgxd1{
            width: 1.6rem;
            height: 1.6rem;
        }
        .xd2{
            width: 2.9rem;
            height: 2rem;
            text-align: right;
            position: absolute;
            right: 0;
        }
        .fa-trash-o{
            width: 2rem;
            height: 2rem;
            color: rgb(153, 152, 152);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">购物车</div>
            </div>
        </div>

        <div class="content1">
            <div class="div2">
                <div class="d5">
                    <img src="img/unchoose.png" alt="" class="img3 img5">
                </div>
                <div class="p1">自营店</div>
                <div id="p3">编辑</div>
            </div>
            <div class="div3">
                <div class="d6">
                    <div class="d7">
                        <img src="img/unchoose.png" alt="" class="img3">
                    </div>
                    <div class="d8">
                        <img src="img/333.png" alt="" class="img4">
                    </div>
                    <div class="p5">圣芝红酒法国银奖干红原瓶进口珍藏波尔
                        多AOC红葡萄酒类整箱6支装……</div>
                    <div class="p6">
                        黑色；约 2020万
                    </div>
                    <div id="p7">￥299.00</div>
                    <div class="d9">
                        <span>   1</span> 
                        <div class="d002"></div>
                    </div>
                    <div class="xd">
                        <div class="xd1">
                            <img src="img/kongxin.png" alt="" class="imgxd1">
                        </div>
                        <div class="xd2"> 
                            <i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> 
                        </div>
                    </div>
                </div>

                <div class="d6">
                    <div class="d7">
                        <img src="img/unchoose.png" alt="" class="img3">
                    </div>
                    <div class="d8">
                        <img src="img/333.png" alt="" class="img4">
                    </div>
                    <div class="p5">圣芝红酒法国银奖干红原瓶进口珍藏波尔
                        多AOC红葡萄酒类整箱6支装……</div>
                    <div class="p6">
                        黑色；约 2020万
                    </div>
                    <div id="p7">￥299.00</div>
                    <div class="d9">
                        <span>   1</span> 
                        <div class="d002"></div>
                    </div>
                    <div class="xd">
                        <div class="xd1">
                            <img src="img/kongxin.png" alt="" class="imgxd1">
                        </div>
                        <div class="xd2"> 
                            <i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> 
                        </div>
                    </div>
                </div>

                <div class="d003"></div>
            </div>
        </div>

        <div class="content2">
            <div class="div2">
                <div class="d5">
                    <img src="img/unchoose.png" alt="" class="img3 img5">
                </div>
                <div class="p1">张裕管饭旗舰店</div>
                <!-- <div id="p3">编辑</div> -->
            </div>
            <div class="div3">
                <div class="d6">
                    <div class="d7">
                        <img src="img/unchoose.png" alt="" class="img3">
                    </div>
                    <div class="d8">
                        <img src="img/333.png" alt="" class="img4">
                    </div>
                    <div class="p5">圣芝红酒法国银奖干红原瓶进口珍藏波尔
                        多AOC红葡萄酒类整箱6支装……</div>
                    <div class="p6">
                        黑色；约 2020万
                    </div>
                    <div id="p7">￥299.00</div>
                    <div class="d9">
                        <span>   1</span> 
                        <div class="d002"></div>
                    </div>
                    <div class="xd">
                        <div class="xd1">
                            <img src="img/kongxin.png" alt="" class="imgxd1">
                        </div>
                        <div class="xd2"> 
                            <i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> 
                        </div>
                    </div>
                </div>

                <div class="d6">
                    <div class="d7">
                        <img src="img/nochoose.png" alt="" class="img6">
                    </div>
                    <div class="d8">
                        <img src="img/camera.png" alt="" class="img7">
                        <div class="d001">
                            无货
                        </div>
                    </div>
                    <div class="p5">圣芝红酒法国银奖干红原瓶进口珍藏波尔
                        多AOC红葡萄酒类整箱6支装……</div>
                    <div class="p6">
                        黑色；约 2020万
                    </div>
                    <div id="p7">￥299.00</div>
                    <div class="dd9">
                        <span>   1</span> 
                        <div class="dd002"></div>
                    </div>
                    <div class="xd">
                        <div class="xd1">
                            <img src="img/kongxin.png" alt="" class="imgxd1">
                        </div>
                        <div class="xd2"> 
                            <i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> 
                        </div>
                    </div>
                </div>

                <div class="d6">
                    <div class="d7">
                        <img src="img/nochoose.png" alt="" class="img6">
                    </div>
                    <div class="d8">
                        <img src="img/camera.png" alt="" class="img7">
                        <div class="d001">
                            已下架
                        </div>
                    </div>
                    <div class="p5">圣芝红酒法国银奖干红原瓶进口珍藏波尔
                        多AOC红葡萄酒类整箱6支装……</div>
                    <div class="p6">
                        黑色；约 2020万
                    </div>
                    <div id="p7">￥299.00</div>
                    <div class="dd9">
                        <span>   1</span> 
                        <div class="dd002"></div>
                    </div>
                    <div class="xd">
                        <div class="xd1">
                            <img src="img/kongxin.png" alt="" class="imgxd1">
                        </div>
                        <div class="xd2"> 
                            <i class="fa fa-trash-o fa-2x" aria-hidden="true"></i> 
                        </div>
                    </div>
                </div>

                <div class="d004">
                    <div id="d005">
                        清空失效商品
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="d10">
                <img src="img/unchoose.png" alt="" class="img5">
            </div>
            <div class="d006">全选</div>
            <div class="d007">总计：</div>
            <div id="grade">￥1196.00</div>
            <div class="d008">不含运费</div>
            <div class="d009">已优惠：</div>
            <div id="grade2">￥119.60</div>
            <div id="d010">
                去结算(4)
            </div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }


        //垃圾桶删除，编辑，完成
        $("#p3").click(function(){
		    $(".xd").css("display","block");
            $("#p3").html("完成");
            console.log(5)

            $(".fa:eq(0)").click(function(){
            $(".d6:eq(0)").css("display","none");
            console.log(9)
            console.log(".d6:eq(0)")
        })

        $(".fa:eq(1)").click(function(){
            $(".d6:eq(1)").css("display","none");
            console.log(9)
            console.log(".d6:eq(0)")
        })

        $(".fa:eq(2)").click(function(){
            $(".d6:eq(2)").css("display","none");
            console.log(9)
            console.log(".d6:eq(0)")
        })

        $(".fa:eq(3)").click(function(){
            $(".d6:eq(3)").css("display","none");
            console.log(9)
            console.log(".d6:eq(0)")
        })

        $(".fa:eq(4)").click(function(){
            $(".d6:eq(4)").css("display","none");
            console.log(9)
            console.log(".d6:eq(0)")
        })

        $("#p3").click(function(){
		    $(".xd").css("display","none");
            $("#p3").html("编辑");
            console.log(5)
        })

		})
       
        //全选
        $(".img3").click(function() {
				var myThis = this;
				$(".img3").each(function(i, v) {
					if(myThis == v) {
						if($(v).prop("src").indexOf('unchoose.png') != -1) {
							$(v).prop("src", "img/choose.png");
							if($(this).prop("class").indexOf('img5') != -1) {
								$(this).parent().parent().next().next().find(".img3").prop("src", "img/choose.png");
							}
							if($(this).prop("class") == "d006") {
								$(".img3").prop("src", "img/choose.png");
							}
						} else {
							$(v).prop("src", "img/unchoose.png");
							if($(this).prop("class").indexOf('img5') != -1) {
								$(this).parent().parent().next().next().find(".img3").prop("src", "img/unchoose.png");
							}
						}
					}
				})
				allPrice();
                // calAllMoney();
			})



            function allPrice() {
				var totleP = 0;
				var prefers = 0;
				var nums = 0;
				$(".div3 .img3").each(function(i, v) {
                    console.log($(v).parent().parent().find("#p7"))
                    console.log($(v).parent().parent().find(".d9"))
                    var vv = $(v).prop("src");
                    console.log(vv)
                        if($(v).prop("src").indexOf('img/choose.png') != -1) {
                        console.log(v)
                        console.log($(v).parent().parent().find("#p7"))
                        console.log($(v).parent().parent().find(".d9").find("span").text())
                        console.log(($(v).parent().find(".d9")))
                        // nums += $(v).parent().parent().find(".d9").text() - 0;
						// totleP += 299 * nums;
						// prefers += ($(v).parent().parent().find(".d9").text() - 0) * 30;
						
                        
						prefers += ($(v).parent().parent().find(".d9").find("span").text() - 0) * 50;
						nums += $(v).parent().parent().find(".d9").find("span").text() - 0;
                        totleP += ($(v).parent().parent().find("#p7").text().split("￥")[1] - 0) * ($(v).parent().parent().find(".d9").find("span").text() - 0);

                        console.log(totleP)
                        console.log(prefers)
                        console.log(nums)
					}
					$("#grade").html("￥" + totleP + ".00");
					$("#grade2").html("￥" + prefers + ".00");
					$("#d010").html("去结算(" + nums + ")");
				})
			}

            var ds = document.getElementsByClassName("d002");
            console.log(ds)

            console.log($(".d002"))


            //数量
            // $(".d002").on("click",function() {
			// 	var myThis = this;
            //     console.log(this)
			// 	$(".d002").each(function(i, v) {
            //         console.log(this)
			// 		if(myThis == v) {
            //             console.log(v) 
            //             console.log($(v).parent())
			// 			var nums = $(v).parent().text() - 0;
            //             console.log(nums)
            //             console.log($(v).parent().parent().children().children().eq(0))
            //                 if(nums < 4) {
            //                     nums++;
            //                 }
            //                 if(nums == 4) {
            //                     nums = 1;
            //                 }
            //             console.log(nums)
			// 			$(v).parent().text(nums);
            //             $(".d9").html(nums + "<div class='d002'></div>");
			// 		}
			// 	})
			// 	allPrice();
			// })

            $(".d002").click(function() {
				console.log($(".d002"))
				var myThis = this;
                console.log(this)
				$(".d002").each(function(i, v) {
					console.log(this)
					if(myThis == v) {
						console.log($(v).prev())
						console.log($(v).prev().text())
						var nums = $(v).prev().text() - 0;
						console.log(nums)
                        console.log($(v).parent().parent().children().eq(0))
						// if($(v).parent().parent().children().eq(0).prop("class")=="noImg") {
						// 	nums=1;
						// }else {
							if(nums < 4) {
								nums++;
							}
							if(nums == 4) {
								nums = 1;
							}
						// }
						console.log(nums)
						$(v).prev().text(nums);
					}
				})
				allPrice();
			})

        //清空失效
        $("#d005").click(function(){
		    $(".d6:eq(3)").css("display","none");
            $(".d6:eq(4)").css("display","none");
            console.log(25)
        })

        $(".d3").click(function(){
			window.location.href="首页.html";
		})

        $("#d010").click(function(){
			window.location.href="订单.html";
		})
    </script>
</body>
</html>